<template>
  <div id="detailright" :class="!show ? 'active' : ''">
    <div @click="show = false" class="close"></div>
    <img v-show="!show" @click="show = true" class="open" src="@/assets/img/housedetail/img11.png" alt="" />
    <router-link to="/index"><img class="gone" src="@/assets/img/housedetail/img04.png" alt="" /></router-link>
    <menubox @handelClick="handelClick" />
    <div class="content">
      <a-tabs default-active-key="1" v-model="activeKey" @change="visible = false">
        <a-tab-pane key="1" tab="租赁价格统计分析">
          <div class="fb box">
            <img src="@/assets/img/housedetail/img06.png" alt="" />
            <div class="number">
              <div class="title fb">
                <span>拱墅区房产租赁价格</span>
                <span class="unit">单位:元/平方米</span>
              </div>
              <scrollNum :change="true" FontSize="0.28rem" Width="0.24rem" Height="0.3rem" count="0,013,642" />
            </div>
          </div>
          <div class="title fb mt24">
            <span>拱墅区各街道房产租赁均价统计</span>
            <span class="unit">单位:元/平方米</span>
          </div>
          <div class="item-box">
            <div v-for="(item, index) in supplyData" :key="index" class="item fb">
              <div style="cursor:pointer" class="fs" @click="changeStreetLine(item, 16)">
                <div v-if="index == 0" class="bgimg01">{{ index + 1 }}</div>
                <div v-else-if="index == 1" class="bgimg02">
                  {{ index + 1 }}
                </div>
                <div v-else-if="index == 2" class="bgimg03">
                  {{ index + 1 }}
                </div>
                <div v-else class="bgimg04">{{ index + 1 }}</div>
                <span class="text">{{ item.name }}</span>
              </div>
              <div class="money" :style="{
                  width:
                    (1.88 * Number(item.money)) / Number(supplyData[0].money) +
                    'rem',
                }">
                {{ item.money }} <span>元</span>
              </div>
            </div>
          </div>
        </a-tab-pane>

        <a-tab-pane key="2" tab="租赁承租人分析">
          <div class="table">
            <div class="col4 th BL">
              <span>全区</span>
              <span>出租数<br />(5万)套 </span>
              <span>出租面积<br />(500万)㎡</span>
              <span>出租金额<br />(100万)元</span>
            </div>
          </div>
          <a-carousel :autoplay="autoplay" :afterChange="afterChange" class="table" :dots="false" arrows>
            <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1">
              <a-icon type="left" />
            </div>
            <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
              <a-icon type="right" />
            </div>
            <div @click="changeStreetLine(item, 16)" v-for="(item, index) in supplyData" :key="index"
              class="col4 mt10 WH">
              <span>{{ item.name }}</span>
              <span>{{ item.num }}</span>
              <span>{{ item.area }}</span>
              <span>{{ item.money }}</span>
            </div>
          </a-carousel>
          <!-- <div @mouseover="mouseover" @mouseout="mouseout"> -->
          <a-table class="table mt40" :scroll="{ y: clientHeight - 400 + 'px' }" :pagination="false" :columns="columns"
            :rowKey="(record) => record.id" :data-source="tableData">
            <div @click="nameClick(record)" slot="name" slot-scope="text, record">
              {{ text }}
            </div>
            <div @click="relativesClick(record)" slot="relatives" slot-scope="text, record">
              {{ text }}
            </div>
          </a-table>
          <!-- </div> -->
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 弹框 -->
    <div v-show="visible" class="model">
      <i @click="visible = false" class="iconfont icon-close"></i>
      <div class="item">
        <span>身份证号：</span><span>360124199106166883</span>
      </div>
      <div class="item"><span>性别：</span><span>女</span></div>
      <div class="item"><span>手机号：</span><span>18420356778</span></div>
      <div class="item"><span>党员类型：</span><span>党员</span></div>
      <div class="item"><span>组织关系：</span><span>xxxxx</span></div>
      <div class="item"><span>职级：</span><span>xxxxx</span></div>
      <div class="item"><span>任职时间：</span><span>1998年4月13日</span></div>
      <div class="item">
        <span>家庭地址：</span><span>{{ name }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import scrollNum from "@/components/scrollNum";
import menubox from "@/components/detail/menubox";
import { post, get } from "@/utils/axios";
import axios from "axios";
// import { houseDetail } from "@/assets/json/houseDetail";
import { supplyData } from "@/assets/json/supplyData";

export default {
  name: "detailright",
  components: {
    menubox,
    scrollNum
  },
  props: {
    activeName: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      clientHeight: window.innerHeight || document.body.clientHeight,
      activeKey: "1",
      autoplay: true,
      timer: null,
      show: true,
      activeIndex: 0,
      visible: false,
      supplyData: [], //街道
      name: "",
      columns: [
        {
          title: "标的名称",
          dataIndex: "name",
          key: "name",
          width: "16%",
          scopedSlots: { customRender: "name" }
        },
        {
          title: "承租人",
          dataIndex: "lessee",
          key: "lessee",
          width: "14%"
        },
        {
          title: "工作单位",
          dataIndex: "units",
          key: "units"
        },
        {
          title: "职务",
          dataIndex: "position",
          key: "position",
          width: "14%"
        },
        {
          title: "亲属",
          dataIndex: "relatives",
          key: "relatives",
          width: "14%",
          scopedSlots: { customRender: "relatives" }
        },
        {
          title: "免租金装修时长",
          dataIndex: "decoration",
          key: "decoration",
          width: "19%"
        },
        {
          title: "元/m²",
          dataIndex: "unitPrice",
          key: "unitPrice"
        }
      ],
      houseDetail: [], //所有小区
      tableData: [] //当前街道小区
      // houseDetail: [
      //   {
      //     key: "1",
      //     type: "住房",
      //     day: "234套",
      //     last: "4566套",
      //     year: "24567套"
      //   },
      //   {
      //     key: "2",
      //     type: "商品房",
      //     day: "196套",
      //     last: "3434套",
      //     year: "20876套"
      //   },
      //   {
      //     key: "3",
      //     type: "二手房",
      //     day: "18套",
      //     last: "356套",
      //     year: "4567套"
      //   }
      // ]
    };
  },
  computed: {
    clickname() {
      return this.activeName * 0.3 + "rem";
    }
  },
  created() {},
  mounted() {
    // http://121.199.34.70:8080/houseLease/all
    post("http://121.199.34.70/gongshu/houseLease/all").then(res => {
      if (res.code == 200) {
        this.houseDetail = res.data;
        // this.tableData = res.data;
        this.changeStreet("拱宸桥街道");
      }
    });
    window.onresize = () => {
      this.clientHeight = window.innerHeight || document.body.clientHeight;
    };
    function sortBy(props) {
      return function(a, b) {
        return b[props] - a[props];
      };
    }
    this.supplyData = supplyData.sort(sortBy("money"));
    this.$bus.$on("handelWarning", msg => {
      this.getData();
      // console.log("222");
    });
  },
  destroyed() {
    // this.timer = null;
  },

  methods: {
    async getData() {
      this.houseDetail = [];
      await post("http://121.199.34.70/gongshu/houseLease/yellow").then(res => {
        if (res.code == 200) {
          this.houseDetail.push.apply(this.houseDetail, res.data);
        }
      });
      await post("http://121.199.34.70/gongshu/houseLease/red").then(res => {
        if (res.code == 200) {
          this.houseDetail.push.apply(this.houseDetail, res.data);
        }
      });
      // console.log(this.houseDetail,99999999);
      this.changeStreet("拱宸桥街道");
    },
    changeStreetLine(obj, zoom) {
      obj.zoom = zoom;
      this.$emit("changeStreetLine", obj);
    },
    //点击街道
    changeStreet(item, setzoom) {
      this.visible = false;
      if (item) {
        this.tableData = this.houseDetail.filter(e => e.street == item);
      } else {
        this.tableData = this.houseDetail;
      }
    },
    //定位街道相关社区
    changeStreetMap(obj, zoom) {
      obj.zoom = zoom;
      this.$emit("changMapCenter", obj);
    },
    afterChange(index) {
      this.visible = false;
      this.tableData = this.houseDetail.filter(
        e => e.street == this.supplyData[index].name
      );
    },
    //点击表格相关
    nameClick(record, index) {
      this.autoplay = false;
      record.zoom = 18;
      this.$emit("changMapCenter", record);
      // return {
      //   on: {
      //     click: () => {
      //       console.log(record, index);
      //       this.visible = true;
      //       this.name = record.name;
      //       this.$emit("changMapCenter", record);
      //     }
      //   }
      // };
    },
    relativesClick(record) {
      this.visible = true;
      this.autoplay = false;
      this.name = record.name;
    },
    //点击mark联动左侧表格数据
    fatherClick(item, setzoom) {
      this.autoplay = false;
      // console.log(item, 33335555);
      this.activeKey = "2";
      this.changeStreet(item, setzoom);
    },
    handelClick(value) {
      if (!value) {
        this.tableData = this.houseDetail;
      } else {
        this.tableData = this.houseDetail.filter(
          e => e.name.indexOf(value) != -1
        );
      }
    }
  }
};
</script>
<style lang="scss">
#detailright {
  .ant-tabs-nav-container {
    overflow: visible;
  }
  .ant-tabs-bar {
    border-bottom: none;
    margin-bottom: 0.2rem;
  }
  .ant-tabs {
    color: #fff;
    font-size: 0.12rem;
    // overflow: visible;
  }
  .ant-tabs-nav .ant-tabs-tab {
    padding: 0;
    line-height: 0.24rem;
  }
  .ant-tabs-nav-scroll {
    border: none;
    background: url(../../assets/img/housedetail/img05.png) center no-repeat;
    background-size: contain;
  }
  .ant-tabs-nav .ant-tabs-tab {
    color: #fff;
  }
  .ant-tabs-nav .ant-tabs-tab-active {
    color: $QS;
    position: relative;
    &:after {
      content: "";
      width: 0.3rem;
      height: 1px;
      background-image: linear-gradient(
          90deg,
          rgba(30, 134, 253, 0.5) 0%,
          rgba(30, 134, 253, 0.51) 1%,
          rgba(4, 233, 239, 0.75) 49%,
          $BL 100%
        ),
        linear-gradient(#1f86fc, #1f86fc);
      background-blend-mode: normal, normal;
      border-radius: 0.08rem;
      position: absolute;
      left: 50%;
      bottom: 0%;
      transform: translate(-50%, 0%);
    }
  }
  .ant-tabs-top .ant-tabs-ink-bar-animated,
  .ant-tabs-bottom .ant-tabs-ink-bar-animated {
    display: none !important;
  }
  .ant-carousel {
    padding: 0.08rem 0;
    width: 93%;
    margin: 0 auto !important;
  }
  //swiper箭头
  .ant-carousel >>> .custom-slick-arrow {
    // width: 25px;
    // height: 25px;
    // font-size: 0.18rem;
    color: #fff;
    background-color: rgba(31, 45, 61, 0.11);
    opacity: 0.3;
  }
  .ant-carousel .slick-prev,
  .ant-carousel .slick-next {
    font-size: 0.16rem;
    color: $BL;
  }
  .ant-carousel .slick-prev {
    top: 70%;
    left: -0.16rem !important;
  }
  .ant-carousel .slick-next {
    top: 70%;
    right: -0.1rem !important;
  }
  .ant-carousel .slick-next::before,
  .ant-carousel .slick-prev::before {
    content: "";
  }
  .ant-carousel >>> .custom-slick-arrow:before {
    display: none;
  }
  .ant-carousel >>> .custom-slick-arrow:hover {
    opacity: 0.5;
  }
}
</style>
<style lang="scss" scoped>
#detailright {
  width: 5.78rem;
  transition: all 0.2s;
  height: 100vh;
  padding: 1.5rem 0.2rem 0 0.7rem;
  box-sizing: border-box;
  background: url(../../assets/img/businessdetail/img08.png) center no-repeat;
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  &.active {
    width: 0;
    padding: 0;
  }
  .close {
    cursor: pointer;
    width: 0.6rem;
    height: 6rem;
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: 0.1rem;
  }
  .open {
    cursor: pointer;
    width: 0.33rem;
    position: fixed;
    transform: translateY(-50%);
    top: 50%;
    right: 0rem;
    z-index: 9998;
  }
  .gone {
    cursor: pointer;
    width: 0.64rem;
    height: 0.64rem;
    position: fixed;
    top: 0.24rem;
    right: 0.28rem;
  }
  .content {
    .title {
      text-align: left;
      line-height: 0.18rem;
      font-size: 0.14rem;
      background-color: #0d2d50;
      color: $QS;
      margin-bottom: 0.2rem;
      .unit {
        margin-left: 0.2rem;
        color: #fff;
        font-size: 0.12rem;
      }
    }
    .box {
      align-items: flex-end;
      img {
        width: 0.85rem;
      }
    }
    .number {
      text-align: right;
      .title {
        display: inline-block;
      }
    }
    .item-box .item {
      margin-top: 0.2rem;
      img {
        width: 0.3rem;
      }
      .text {
        color: #fff;
        margin-left: 0.2rem;
      }
      .money {
        padding-right: 0.04rem;
        text-align: right;
        color: $QS;
        font-family: "electronicFont";
        line-height: 0.18rem;
        background-image: linear-gradient(
            90deg,
            rgba(9, 192, 245, 0.6) 0%,
            #0c2c4f 100%
          ),
          linear-gradient(#000000, #000000);
        background-blend-mode: normal, normal;
        span {
          font-size: 0.12rem;
          color: #0975a2;
        }
      }
    }
  }
  .table {
    text-align: left;
  }
  .table .th {
    line-height: 0.2rem;
  }
  .table .BL {
    background: rgb(7, 20, 64);
  }
  .table .col4 {
    cursor: pointer;
    width: 100%;
    display: grid !important;
  }
  .table .col4 span {
    // display: inline-block;
    // width: 25%;
    font-size: 0.12rem;
    line-height: 0.3rem;
    text-align: center;
  }
  .model {
    width: 3.5rem;
    padding: 0.24rem 0;
    background-image: linear-gradient(#0b1f60, #0b1f60),
      linear-gradient(#023168, #023168);
    background-blend-mode: normal, normal;
    border-radius: 0.04rem;
    position: absolute;
    right: 0.2rem;
    bottom: 0.6rem;
    .icon-close {
      cursor: pointer;
      font-size: 0.12rem;
      color: $WHO;
      position: absolute;
      right: 0.13rem;
      top: 0.13rem;
    }
    .item span {
      text-align: right;
      display: inline-block;
      line-height: 0.28rem;
      width: 40%;
      &:nth-of-type(2) {
        text-align: left;
        width: 60%;
      }
    }
  }
}
</style>
